<template>
  <div class="my flex-column">
    <div class="header-wrapper">
      <custom-navigation :title="title" :titleColor="titleColor"></custom-navigation>
    </div>
    <div class="main flex-column">
      <scroll-view
        class="container flex-column"
        scroll-y
        scroll-with-animation
        scroll-top="SCROLL_TOP"
      >
        <!-- 头部信息 -->
        <div class="header">
          <swiper class="header-swiper" vertical interval="12000" autoplay circular>
            <swiper-item class="item">
              <img src="https://7465-test-1082be-1257701543.tcb.qcloud.la/bg/喜欢背景2.png?sign=30ca9dc347acd7268cc2fc4b856a5ed4&t=1538310242" mode="widthFix" style="width:100%">
            </swiper-item>
            <swiper-item class="item">
              <img src="https://7465-test-1082be-1257701543.tcb.qcloud.la/bg/喜欢背景3.png?sign=100701e1d52ffc2b0678d6308fbf7c46&t=1538310266" mode="widthFix" style="width:100%">
            </swiper-item>
            <swiper-item class="item">
              <img src="https://7465-test-1082be-1257701543.tcb.qcloud.la/bg/背景@2x.png?sign=c413f5bea7fb84943fb12f52788baf27&t=1538310284" mode="widthFix" style="width:100%">
            </swiper-item>
          </swiper>
          <div class="user-info flex-center">
            <!-- 未验证 -->
            <div class="user not-auth" v-if="!isAuth">
              <img-btn :openType="openType" :imgSrc="imgSrc" :imgStyle="imgStyle" @getUserInfo="getUserInfo" />
            </div>
            <!-- 验证登录之后 -->
            <div class="user auth flex-column" v-if="isAuth">
              <img :src="userInfo.avatarUrl" class="avatar" />
              <span class="nich-name">{{userInfo.nickName}}</span>
            </div>
          </div>
          <div class="about flex-column" @click="toAbout">
            <img src="/static/btn-icon/about.png" class="image" />
            <span class="text">关于我</span>
          </div>
        </div>
        <!-- 我喜欢 -->
        <div class="likes flex-column">
          <img src="/static/btn-icon/like.png" class="headline" />
          <ul class="preview-container flex-row" v-if="likes.length">
            <li class="item" v-for="item in likes" :key="item._id">
              <preview :data="item" />
            </li>
          </ul>
          <no-likes :isAuth="isAuth" v-if="!(isAuth || likes.length)"></no-likes>
        </div>
      </scroll-view>
    </div>
  </div>
</template>

<script>
import CustomNavigation from '@/components/CustomNavigation/CustomNavigation.vue'
import LikeBtn from '@/components/LikeBtn/LikeBtn.vue'
import ImgBtn from '@/components/ImgBtn/ImgBtn'
import Preview from '@/components/Preview/Preview.vue'
import NoLikes from '@/components/NoLikes/NoLikes.vue'

const db = wx.cloud.database()
export default {
  name: 'My',
  data () {
    return {
      title: '无她',
      titleColor: '#000',
      openType: 'getUserInfo',
      imgSrc: '/static/btn-icon/my.png',
      imgStyle: 'width: 120rpx;height: 120rpx;',
      isAuth: false, // 用户是否验证（登录）
      userInfo: {}, // 用户信息
      likes: [] // 我喜欢
    }
  },
  methods: {
    toAbout () { // 跳转到关于
      wx.navigateTo({
        url: '/pages/About/main'
      })
    },
    getUserInfo (userInfo) { // 用户登录后添加到后台
      wx.cloud.callFunction({
        name: 'addUser',
        data: {
          user: userInfo
        }
      })
        .then(res => {
          this.userInfo = {
            ...userInfo,
            _openid: res.result
          }
          wx.setStorageSync('__USER__', this.userInfo)
          this.isAuth = true
          this._getLikes()
        })
    },
    async _getLikes () { // 获取当前用户的喜欢列表
      await db.collection('likes')
        .limit(10)
        .where({_openid: this.userInfo._openid})
        .orderBy('createTime', 'desc')
        .get()
        .then(res => {
          this.likes = res.data
        })
    },
    _initAuth () { // 判断用户是否登录
      const userInfo = wx.getStorageSync('__USER__')
      if (!userInfo) {
        this.isAuth = false
        this.userInfo = {}
        return
      }
      this.userInfo = userInfo
      this.isAuth = true
      this._getLikes()
    }
  },
  mounted () {
    this._initAuth()
    wx.setNavigationBarColor({
      frontColor: '#000000',
      backgroundColor: '#ffffff',
      animation: {
        duration: 400,
        timingFunc: 'ease'
      }
    })
  },
  onShow () {
    if (this.isAuth) {
      this._getLikes()
    }
  },
  components: {
    LikeBtn,
    CustomNavigation,
    ImgBtn,
    Preview,
    NoLikes
  }
}
</script>

<style lang="stylus" scoped>
  .my
    height 100%
    .header-wrapper
      width 100%
      height 0
      padding-top 16%
    .main
      flex 1
      width 100%
      background-color #f5f5f5
      .container
        height 100%
      .header
        height 574rpx
        position relative
        width 100%
        .header-swiper
          height 100%
        .user-info
          position absolute
          left 0
          top 0
          bottom 0
          right 0
          .user
            padding-top 60rpx
          .not-auth
            width 120rpx
          .auth
            .avatar
              width 120rpx
              height 120rpx
              border-radius 50%
            .nich-name
              font-size 14px
              line-height 32px
        .about
          position absolute
          right 60rpx
          bottom 50rpx
          .image
            width 34rpx
            height 34rpx
          .text
            line-height 24px
            font-size 12px
            color #999
      .likes
        flex 1
        padding 24rpx 0
        .headline
          width 97rpx
          height 42rpx
        .preview-container
          flex-wrap wrap
          justify-content space-between
          width 100%
          padding 0 3.6%
          box-sizing border-box
          .item
            margin-top 30rpx
</style>
